<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  实现用户注册功能
  User: guowenliang
  Date: 2021/10/15
  Time: 12:40
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" href="/css/register.css">
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100vh;
        }
    </style>
</head>


<body>
<div id="loginDiv">
    <form method="post" action="/loginServlet?method=register" autocomplete="on">
        <h1>黑马面面注册页面</h1>
        <p><span style="color: red">*</span>用&nbsp;&nbsp;户&nbsp;&nbsp;名:<input id="username" name="username" type="text" autofocus required placeholder="请输入您的手机号">
        </p>
        <span id="regPhone"></span>

        <p><span style="color: red">*</span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input id="password" name="password" type="password" onkeyup="validate()" required placeholder="请设置登录密码"></p>

        <p><span style="color: red">*</span>确认密码:<input id="surePassword" name="surePassword" type="password" onkeyup="validate()" required placeholder="请确认登录密码"></p>
        <span id="validateMsg"></span>
        <p><span style="color: red">*</span>验&nbsp;&nbsp;证&nbsp;&nbsp;码:<input id="code" name="code" type="text" required placeholder="请输入短信验证码"><button id="getCode" type="button" style="margin: 3px;padding:3px;border-radius: 8px;color: dimgrey">获取短信验证码</button> </p>
        <p id="msg" style="color: #ff0000">${msg}</p>
        <p><span style="color: red">*</span>电子邮件:<input id="email" name="email" type="email" required placeholder="请输入电子邮箱"></p>

        <p style="text-align: center;">
            <input type="submit" class="button" onclick="submitT()" value="提交">
        </p>
    </form>
</div>
<script src="/js/particles.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/register.js"></script>
</body>
<script>

    // 重新输入username，把报错msg提示清空
    document.getElementById("username").onfocus=function (){
        document.getElementById("msg").innerHTML="";
    }

    // 验证两次密码是否相同
    function validate(){
        let password = document.getElementById("password").value;
        let surePassword = document.getElementById("surePassword").value;
        <!-- 对比两次输入的密码 -->
        if(password == surePassword){
            document.getElementById("validateMsg").innerHTML="<b><font size='3px'; color='#32cd32';>两次密码相同</font></b>";
        } else {
            document.getElementById("validateMsg").innerHTML="<b><font size='3px'; color='#ff4500';>两次密码不相同</font></b>";
        }
    }
    // 判断用户名是否为手机号
    document.getElementById("username").onblur = function (){
        let regPhone = /^[1][358][0-9]{9}$/;
        if(!regPhone.test(document.getElementById("username").value)&&document.getElementById("username").value != null){
            document.getElementById("regPhone").innerHTML="<b><font size='3px'; color='#ff4500';>用户名请输入您的手机号</font></b>";
        }
    }
    document.getElementById("username").onfocus = function (){
        document.getElementById("regPhone").innerHTML="";
    }

    // 获取验证码
    var bt01 = document.getElementById("getCode");
    bt01.onclick = function() {
        let regPhone = /^[1][358][0-9]{9}$/;
        if(regPhone.test(document.getElementById("username").value)){
            $.ajax({
                url:"/loginServlet",
                data:{
                    method:"getCode",
                    phone:document.getElementById("username").value
                }
            });
            bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮
            var time = 120;  //倒计时120秒
            var timer = setInterval(fun1, 1000);  //设置定时器
            function fun1() {
                time--;
                if(time>=0) {
                    bt01.innerHTML = time + "s后重新发送";
                }else{
                    bt01.innerHTML = "重新发送验证码";
                    bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮
                    clearTimeout(timer);  //清除定时器
                    time = 120;  //设置循环重新开始条件
                }
            }
        }
    }
</script>
</html>